From 4fabc910d2e1bb4581ac7a80f019bd22758d089b Mon Sep 17 00:00:00 2001 From: Marius Hoch Date: Mon, 19 Aug 2013 21:09:08 +0200 Subject: [PATCH] Make variant selection menu toggleable by keyboard Altered the script as the variant selection menu uses a slightly different dom structure than the other menus. Bug: 46486 Change-Id: I4fdfe1cf002e4f5370b7073b509e33828db7dcbf --- skins/vector/vector.js | 24 +++++++++++++++--------- 1 file changed, 15 insertions(+), 9 deletions(-) diff --git a/skins/vector/vector.js b/skins/vector/vector.js index ff3332f8d8..aa64624ac0 100644 --- a/skins/vector/vector.js +++ b/skins/vector/vector.js @@ -4,19 +4,25 @@ jQuery( function ( $ ) { $( 'div.vectorMenu' ).each( function () { var $el = $( this ); - $el.find( 'h3:first a:first' ) - // For accessibility, show the menu when the hidden link in the menu is clicked (bug 24298) - .click( function ( e ) { - $el.find( '.menu:first' ).toggleClass( 'menuForceShow' ); - e.preventDefault(); + $el.find( '> h3 > a' ).parent() + .attr( 'tabindex', '0' ) + // For accessibility, show the menu when the h3 is clicked (bug 24298/46486) + .on( 'click keypress', function ( e ) { + if( e.type === 'click' || e.which === 13 ) { + $el.find( '.menu:first' ).toggleClass( 'menuForceShow' ); + e.preventDefault(); + } } ) - // When the hidden link has focus, also set a class that will change the arrow icon + // When the heading has focus, also set a class that will change the arrow icon .focus( function () { - $el.addClass( 'vectorMenuFocus' ); + $el.find( '> a' ).addClass( 'vectorMenuFocus' ); } ) .blur( function () { - $el.removeClass( 'vectorMenuFocus' ); - } ); + $el.find( '> a' ).removeClass( 'vectorMenuFocus' ); + } ) + .find( '> a:first' ) + // As the h3 can already be focused there's no need for the link to be focusable + .attr( 'tabindex', '-1' ); } ); /** -- 2.20.1